<template>
    <el-table :data="tableData" class="table">
      <el-table-column label="申请时间" prop="applyTime" />
      <el-table-column label="申请内容" prop="applyDesc" />
      <el-table-column label="申请用途" prop="applyReason" />
      <el-table-column label="申请状态" prop="applyStatus" />
      <el-table-column label="审批意见" prop="approvalDesc" />
    </el-table>
</template>
  
<script setup lang='ts' name="ApplyRecord">
    import request from "@/requests/request";
    import { reactive, onMounted } from "vue";
    import moment from "moment";

    interface RecordItem {
      applyTime: string,
      applyDesc: string,
      applyReason: string,
      applyStatus: string,
      approvalDesc: string
    }
    const tableData = reactive<Array<RecordItem>>([])

    function getApplyStatus(applyStatus: number): string {
      /**
       * 1:申请完成, 2:审批通过, 3:拒绝申请',
       */
      switch (applyStatus) {
        case 2:
          return "审批通过"
        case 3:
          return "拒绝申请"
        default:
          return "未知状态"
      }
    }

    onMounted(()=> {
      request.post("/queryApplyRecord").then((res: any) => {
        const { data, message, resCode } = res.data
        const objArray = JSON.parse(data)
        if (resCode === 0 && objArray.length > 0) {
          for (const obj of objArray) {
            // 只展示审批通过与拒绝申请的记录
            if (obj.applyStatus === 2 || obj.applyStatus === 3) {
                const applyTime = moment(obj.applyTime).format("YYYY-MM-DD HH:mm:ss")
                const applyDesc = obj.applyType === 1 ? `新建${obj.applyVolume}GB`: `扩容${obj.applyVolume}GB`
                const applyReason = obj.applyReason
                const applyStatus = getApplyStatus(obj.applyStatus)
                const approvalDesc = (obj.approvalDesc === "" ? "无" : obj.approvalDesc)
                const item: RecordItem = {applyTime, applyDesc, applyReason, applyStatus, approvalDesc}
                tableData.push(item)
            }
          }
        }
        console.log("/queryApplyRecord", data, message, resCode, objArray)
      }).catch((reason: any) => {
        console.log(reason)
      })
    })

</script>
  
<style scoped>
    .table {
      width: 100%;
    }
</style>